<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线OJ</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar">
        <div class="nav-container">
            <a href="/" class="nav-logo">OJ Platform</a>
            <ul class="nav-menu">
                <li class="nav-item"><a href="/questions_page" class="nav-link">题库</a></li>
                <li class="nav-item"><a href="/forum" class="nav-link">论坛</a></li>
                <li class="nav-item"><a href="/jobs" class="nav-link">求职</a></li>
                <li class="nav-item"><a href="/contests" class="nav-link">竞赛</a></li>
                <li class="nav-item"><a href="/rankings" class="nav-link">排行榜</a></li>
            </ul>
        </div>
    </nav>
    <div id="app" class="oj-app">
        <section class="oj-problems">
            <h2>Problems</h2>
            <ul>
                <li v-for="problem in problems" :key="problem.id" @click="goToProblem(problem)">
                    <div class="oj-problem">
                        <h3>{{ problem.qid }}.{{ problem.qname }}<span style="float: right;">{{problem.qlevel}}</span></h3>
                    </div>
                </li>
            </ul>
        </section>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script src="script.js"></script>
</body>
</html>